<template>
	<div class="page-wrapper">
		<!-- <div class="header">
            <div class="left">
                <div class="label">总资产（元）</div>
                <div class="value">{{ aviBal }}</div>
            </div>
            <div class="right">
                <img src="@/assets/purseBg.png" alt="" />
            </div>
        </div> -->
		<div class="purse" v-for="(item, index) in aList" :key="item.accountType">
			<!-- <img class="bg" src="@/assets/purseBg4.png" alt=""  /> -->
			<img class="bg" src="@/assets/purseBg1.png" alt="" v-if="Number(index+1)==1" />
			<img class="bg" src="@/assets/purseBg2.png" alt="" v-else-if="Number(index+1)==2" />
			<img class="bg" src="@/assets/purseBg3.png" alt="" v-else-if="Number(index+1)==3" />
			<img class="bg" src="@/assets/purseBg4.png" alt="" v-else-if="Number(index+1)==4" />
			<img class="bg" src="@/assets/purseBg5.png" alt="" v-else-if="Number(index+1)==5" />
			<img class="bg" src="@/assets/purseBg6.png" alt="" v-else-if="Number(index+1)==6" />
			<img class="bg" src="@/assets/purseBg7.png" alt="" v-else-if="Number(index+1)==7" />
			<img class="bg" src="@/assets/purseBg8.png" alt="" v-else-if="Number(index+1)==8" />
			<img class="bg" src="@/assets/purseBg9.png" alt="" v-else />
			<div class="content">
				<div class="left">
					<div class="top">{{ item.accountName }}</div>
					<div class="bottom">
						<div class="left">{{ item.aviBal }}</div>
					</div>
				</div>
				<div class="right dis" v-if="index <= 5 && item.accountType !== 'SUBSIDY'" @click="goTxPage(item)"
					:style="getItemStyle(index)">
					{{ item.accountName === '乐刷账户' ? '查看' : '提现' }}
				</div>
				<div class="right dis" :style="getItemStyle(index)" v-if="index > 5 && item.accountType !== 'SUBSIDY'" @click="goTxPage(item)">
					{{ item.accountName === '乐刷账户' ? '查看' : '提现' }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { accountList, accountBalAll } from '@/api/wallet'
	import router from '@/router'
	import store from '@/store'
	const aList = ref([])
	const bgList = ref('@/assets/purseBg')
	const baseStyles = ref({
		color: '#FFB93B',
		fontSize: '14px'
	})
	const activeStyles = ref({
		color: '#7B66E4',
		fontSize: '14px'
	})
	const getItemStyle = (index) => {
		// 根据索引返回不同的样式对象
		if (index === 0) {
			return {
				color: '#FFB93B',
				fontSize: '14px'
			};
		}else if(index === 1){
			return {
				color: '#5FC457',
				fontSize: '14px'
			};
		}else if(index === 2){
			return {
				color: '#0FC8D5',
				fontSize: '14px'
			};
		}else if(index === 3){
			return {
				color: '#7B66E4',
				fontSize: '14px'
			};
		}else{
			return {
				color: '#fade3c',
				fontSize: '14px'
			};
		}
	}
	const getAccountList = () => {
		accountList({}).then(res => {
			aList.value=res.object
			// aList.value[0]=res.object[0]
		})
	}
	const goTxPage = item => {
		if (item.accountName === '乐刷账户') {
			router.push({
				path: '/LSlist',
				query: {
					businessCode: item.businessCode,
					balance: item.balance,
					accountType: item.accountType,
					token: store.state.user.token
				}
			})
		} else {
			router.push({
				path: '/cashInfo',
				query: {
					businessCode: item.businessCode,
					balance: item.balance,
					accountType: item.accountType,
					token: store.state.user.token
				}
			})
		}
	}
	getAccountList()
</script>

<style scoped lang="scss">
	.page-wrapper {
		height: 100vh;
		padding: 20px;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			height: 114px;
			background: linear-gradient(159deg, #66d6ff 0%, #a9d0fe 100%);
			opacity: 1;
			border-radius: 10px;

			.left {
				font-size: 16px;
				font-weight: 500;
				color: #ffffff;
				line-height: 30px;

				.value {
					font-size: 20px;
				}
			}

			.right {
				img {
					width: 63px;
					height: 88px;
				}
			}
		}

		.purse {
			position: relative;
			margin-top: 10px;

			.bg {
				width: 100%;
			}

			.content {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
				box-sizing: border-box;

				.right {
					color: #ffffff;
					margin-right: 15px;
					width: 64px;
					height: 24px;
					background: #FFFFFF;
					border-radius: 38px;

				}

				.top {
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					opacity: 1;
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						font-size: 20px;
						font-weight: 500;
						color: #ffffff;
						opacity: 1;
						margin-top: 10px;
					}

					.right {
						width: 74px;
						height: 27px;
						background: #ffffff;
						border-radius: 4px;
						font-size: 14px;
						font-weight: 400;
						color: #f3ad52;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.purse:nth-child(1) {}
	}

	.dis {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>